<template>
  <div>
    <!-- 退货详情 -->
    <el-dialog
      v-el-drag-dialog
      :title="titleName"
      :visible.sync="visible"
      width="1024px"
      height="600px"
    >
      <div class="center">
        <!-- 描述列表 -->
        <el-descriptions size="medium" style="margin-top: 20px;">
          <el-descriptions-item label="退货单位">kooriookami</el-descriptions-item>
          <el-descriptions-item label="退货时间">21-06-06 09：30</el-descriptions-item>
          <el-descriptions-item label="退货人">xxx</el-descriptions-item>
          <el-descriptions-item label="关联订单号">xxx</el-descriptions-item>
          <el-descriptions-item label="客户名称">ooo</el-descriptions-item>
          <el-descriptions-item label="联系电话">13100001234</el-descriptions-item>
          <el-descriptions-item label="地址">湖北省武汉市江夏区纸坊街道灯火阑珊处(楼层:7)</el-descriptions-item>
        </el-descriptions>
        <el-descriptions size="medium" style="margin-bottom: 30px;">
          <el-descriptions-item label="备注">质量不满意</el-descriptions-item>
        </el-descriptions>
        <!-- 表格 -->
        <lb-table
          ref="lbTable"
          border
          highlight-current-row
          element-loading-text="加载中"
          :column="tableData.column"
          :data="tableData.data"
          :total="tableData.total"
          custom-column
          align="center"
        />
      </div>
      <!-- 底部 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false"> 关闭 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'salesReturnDetails',
    data() {
      return {
        visible: false,
        titleName: '退货单' + ' - ' + '123123123',
        tableData: {
          total: 0,
          column: [
            {
              prop: 'num',
              label: '#',
              width: 30
            },
            {
              prop: 'productName',
              label: '商品名称',
              width: 150
            },
            {
              prop: 'specification',
              label: '规格型号',
              width: 150
            },
            {
              prop: 'quantity',
              label: '数量',
              width: 150
            },
            {
              prop: 'suttle',
              label: '净重',
              width: 150
            },
            {
              prop: 'univalence',
              label: '单价',
              width: 150
            },
            {
              prop: 'refund',
              label: '实退金额'
            }
          ],
          data: [{
            num: '1',
            productName: '15KG液化气',
            specification: '12KG',
            quantity: 1,
            univalence: 120,
            suttle: 0,
            refund: '100.00'
          }]
        }
      }
    },
    methods: {
      open(temp) {
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.temp = Object.assign(this.temp, temp)
          }
        })
      }
    }
  }
</script>

<style lang='scss' scoped>
.center {
  height: 500px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-align: left;
}
</style>
